<template>
	<div class="card-container">
		<div class="card-layout">
			<div class="card-top-view">{{ chartTitle }}</div>
			<div class="pie-chart-view">
				<div :id="randomId" class="pie-chart"></div>
				<!-- 图例 -->
				<div class="pie-legend" :style="{ top: 'calc((200px - ' + chartData.length + ' * 32px) / 2)' }">
					<div class="legend-item hor-layout-center" v-for="(item, index) in chartData">
						<div class="legend-color" v-if="colorIndex == index" v-for="(colorItem, colorIndex) in pieColor" :style="{ background: colorItem }"></div>
						<div class="legend-name van-ellipsis">{{ item.name }}</div>
						<div class="legend-value" v-for="(valueItem, valueIndex) in valueList">
							<div class="legend-value-title" :style="{ top: valueItem.titleTop}" v-if="index == 0 && valueItem.title" v-html="valueItem.titleH5"></div>
							{{ item[valueItem.key] }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script src="./indexJs.js"></script>

<style scoped>
	.pie-chart-view {
		width: 345px;
		height: 201px;
		position: relative;
	}

	.pie-chart {
		width: 345px;
		height: 201px;
	}

	.pie-legend {
		position: absolute;
		top: 0px;
		right: 6px;
		width: 50%;
	}

	.legend-item {
		padding: 9px 0px;
	}

	.legend-color {
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}

	.legend-name {
		flex: 1.5;
		margin-left: 5px;
		/*字体样式*/
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(86, 86, 86, 1);
		line-height: 14px;
	}

	.legend-value {
		flex: 1;
		/*  字体样式*/
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #404144;
		line-height: 14px;
	}

	.legend-value-title {
		position: absolute;
		top: -15px;
		/*  字体样式*/
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(86, 86, 86, 1);
		line-height: 14px;
	}
</style>
